<template>
    <button @click="goBack" class="btn1">RETURN</button>
    <el-container class="blog-container">
        <el-button @click="toggleBookmark" type="primary" class="btn" >
            {{ isBookmarked ? '取消收藏' : '收藏' }}
        </el-button>
        <el-header>
            <h1 class="title1" style="margin-top: 15px">{{ blog.title }}</h1>
        </el-header>
        <el-main>

            <p class="cnt" style="height: 400px;">{{ blog.content }}</p>
            <p class="cnt" style="text-align: right;">{{ blog.createDate }}</p>

            <el-button @click="toggleRemarks" type="primary" class="btn" style="width: 60px">
                {{ showRemarks ? '关闭' : '查看' }}评论
            </el-button>
            <el-collapse v-if="showRemarks" class="ccollapse">
                <div v-for="remark in remarks" :key="remark.id" class="mes">
                    <p class="cnt">{{ remark.observer }}</p>
                    <p class="cnt">{{ remark.content }}</p>
                    <p >{{ remark.createDate }}<button @click="deleteRemark(remark.id)" >删除</button></p>
                </div>
            </el-collapse>

            <el-form v-if="showRemarks" class="cform" label-width="100px" @submit.prevent >
                <el-form-item class="pl"  label="评论">

                    <el-input class="txt11" v-model="newRemark" type="textarea" rows="3"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitRemark"  class="btn" style="width: 60px">提交评论</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            blog: {},
            remarks: [],
            showRemarks: false,
            newRemark: '',
            blogId: '',
            isBookmarked: false
        };
    },
    mounted() {
        this.getBlogDetail();
        this.getRemarkDetail();
        this.checkBookmarkStatus();
    },
    methods: {
        goBack(){
            this.$router.go (-1)
        },
        checkBookmarkStatus() {
            const id = this.$route.params.id;
            axios.get(`/api/checkBookmark/${id}`)
                .then((response) => {
                    const result = response.data;
                    if (result.code === 100) {
                        this.isBookmarked = true;
                    } else {
                        this.isBookmarked = false;
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
        },
        toggleBookmark() {
            const blogId = this.$route.params.id;
            if (this.isBookmarked) {
                axios.post(`/api/deleteBookmark/${blogId}`)
                    .then((response) => {
                        if (response.data.code === 200) {
                            this.isBookmarked = false;
                        }
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            } else {
                axios.post('/api/addBookmark', { blogId: blogId })
                    .then((response) => {
                        if (response.data.code === 200) {
                            this.isBookmarked = true;
                        }
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            }
        },

        getBlogDetail() {
            const id = this.$route.params.id;
            axios.get(`/api/posts/${id}`)
                .then((response) => {
                    this.blog = response.data;
                })
                .catch((error) => {
                    console.error(error);
                });
        },
        getRemarkDetail() {
            const id = this.$route.params.id;
            axios.get(`/api/remark/${id}`)
                .then((response) => {
                    this.remarks = response.data.data;
                })
                .catch((error) => {
                    console.error(error);
                });
        },
        toggleRemarks() {
            this.showRemarks = !this.showRemarks;
        },
        submitRemark() {
            if (this.newRemark.trim() === '') {
                return;
            }
            const remarkData = {
                content: this.newRemark,
                blogId: this.$route.params.id
            };
            console.log(remarkData);
            axios.post('/api/remark', remarkData)
                .then((response) => {
                    this.newRemark = '';
                    this.getRemarkDetail();
                })
                .catch((error) => {
                    console.error(error);
                });
        },
        deleteRemark(id) {
            const r = confirm("确定要删除吗？");
            if (r==true){
                axios.delete(`/api/remark/${id}`)
                    .then(response => {
                        this.getRemarkDetail();
                    })
                    .catch(error => {
                        console.error(error);
                    });
            }
            else{
                return
            }
        },
    },
};
</script>
<style>

.blog-container {
    max-width: 800px;
    margin: 10px auto 0;

    padding: 10px;
    background: rgba(0, 0, 0, 0.6);
    border:3px solid #666666;
    border-radius: 5px ;
}
.title1 {
    font-size: 35px;
    margin-bottom: 80px;
    font-style: initial;
}
.cnt{
    line-height: 1.5;
    text-align: left;
    width: 800px;
    height: 50px;
    overflow: auto;
    border: 2px dashed transparent;
    color:white;
    font-weight: bold;
    font-family: Papyrus,STXiHei,sans-serif;
}


.ccollapse {
    margin-top: 20px;

}

.ccollapse-item {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px;
}

.ccollapse-item__content p {
    margin-bottom: 5px;


}
.ccollapse-item__content p:last-child {
    margin-bottom: 0;

}

header{
    font-weight:bold ;
    font-family: Papyrus,STXiHei,sans-serif;
    color:#ffffff;
    font-size:65px;
    height:80px;

}
main{
    text-align: right;
}

textarea{
    hidden:true;
    height:100px;
    width:800px;
    background:transparent;
    outline: none;
    color:#ffffff;
}

body{
    height: 100%;
}
.btn1{
    width:65px;
    height: 35px;
    line-height: 35px;
    background:radial-gradient(ellipse at center,#73f219,#d1d2d4,#000000);
    border-radius: 5px;
    display: flex;
    margin-left:45px;
    margin-top: auto;
    text-align: center;
}
.btn1:hover{
    cursor: pointer;
    background: radial-gradient(ellipse at center,#d1d2d4,#73f219,#000000);

}
.mes{
    border:1px solid #666666;
    border-radius: 5px ;
    background:linear-gradient(90deg,#000000,#d1d2d4);

}
.pl{
    display: block;
    text-align:left;
    color: #fff;
    font-weight: bold;
    font-family: Papyrus,STXiHei,sans-serif;
}


</style>
